import React, { useState, useEffect } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Table, Modal, Button, Popconfirm, message } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import DebateModal from './component/debate_modal';
import { queryLists, deletedebate } from '@/services/debate';
function DebateManage () {
    // 辩论列表相关
    const [ debateLists, setLists ] = useState( [] );
    const columns = [
        {
            title: "主题",
            dataIndex: 'title',
            key: "title",
            align: "center",
            render: ( text, record ) => {
                return (
                    <div style={ { color: "#1980ff" } }>
                        <a> { record.title }</a>
                    </div>
                );
            }
        },
        {
            title: "内容",
            dataIndex: "content",
            key: "content",
            align: "center",
        },
        {
            title: "正方观点",
            dataIndex: "sideViewPoint",
            key: "sideViewPoint",
            align: "center",
            render: ( text, record ) => {
                return (
                    <div>
                        <span >{ record.sideViewPoint }</span>
                    </div>
                );
            }
        },
        {
            title: "反方观点",
            dataIndex: "consideViewPoint",
            key: "consideViewPoint",
            align: "center",
            render: ( text, record ) => {
                return (
                    <div>
                        <span >{ record.consideViewPoint }</span>
                    </div>
                );
            }
        },
        {
            title: "操作",
            key: "action",
            dataIndex: "action",
            align: "center",
            render: ( text, record ) => {
                return (
                    <div>

                        <Button type="link" onClick={ () => handleUpdate( record ) }>编辑</Button>
                        <Popconfirm title="确定删除吗？" onConfirm={ () => handleDelete( record._id ) } >
                            <Button type="link" style={ { color: "red" } } >删除</Button>
                        </Popconfirm>

                    </div>
                );
            }
        }
    ];

    useEffect( () => {
        handleQueryLists();
    }, [] );
    const handleQueryLists = async () => {
        const res = await queryLists();
        console.log( res );
        setLists( res.data );
    };
    // 辩论添加（编辑相关）
    const [ visible, setVisible ] = useState( false );
    const [ modalTitle, setModalTitle ] = useState( '创建' );
    const [ mode, setMode ] = useState( "create" );

    const handleCreateDebate = () => {
        setVisible( true );
        setModalTitle( '创建辩论' );
        setMode( 'create' );
    };

    const handleModalClose = () => {
        setVisible( false );
        handleQueryLists();
        setCurrent( {} );
    };

    const handleDelete = async ( id ) => {
        const payload = {
            id
        };
        const res = await deletedebate( payload );
        if ( res.code == 0 )
        {
            message.success( '删除成功！' );
        }
        handleQueryLists();
    };

    const [ currentDebate, setCurrent ] = useState( {} );
    const handleUpdate = ( record ) => {
        setVisible( true );
        setModalTitle( '编辑辩论' );
        setMode( 'edit' );
        setCurrent( record );
    };
    return (
        <PageHeaderWrapper
            extra={
                <Button
                    style={ { marginRight: "20px" } }
                    type="primary"
                    onClick={ handleCreateDebate }
                >
                    添加
                </Button>
            }>

            <Table dataSource={ debateLists } columns={ columns }></Table>
            <DebateModal current={ currentDebate } visible={ visible } title={ modalTitle } mode={ mode } close={ handleModalClose } />
        </PageHeaderWrapper>
    );
}

export default DebateManage;